<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>cc</title>
		<script src="static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="static/element-ui/2.1.0/index.css" />
		<script src="hou-tai/js/common.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body,
			#app,
			.cc-container {
				margin: 0;
				padding: 0;
				height: 100%;
				color: #333;
			}
			
			body {
				background: url(img/wxbg.jpg) no-repeat;
				background-size: cover;
			}
			
			.cc-container>.el-header {
				margin: 0;
				padding: 0;
				background-color: #409EFF;
				color: #FFF;
				height: auto !important;
			}
			
			.main_inner {
				margin: auto;
				width: 800px;
				height: 660px;
				background-color: #EEE;
			}
			
			.chat_list {
				width: 200px !important;
				background: #2e3238;
				color: #FFF;
			}
			
			.chat_item {
				padding: 12px 18px 11px;
				border-bottom: 1px solid #292c33;
				cursor: pointer;
			}
			
			.active {
				background: #3a3f45;
			}
			
			.box_hd {
				color: #333;
				text-align: center;
				height: 25px !important;
				border-bottom: 1px solid #d6d6d6;
			}
			
			.box_bd {
				color: #333;
			}
			
			.box_ft {
				height: auto !important;
			}
			
			.content {
				padding: 0;
			}
			
			.action {
				height: auto !important;
			}
			
			.right {
				text-align: right;
			}
			
			.left {
				text-align: left;
			}
			
			.message_sender {
				font-size: 12px;
			}
			
			.message_content {
				display: inline-block;
				word-wrap: break-word;
				word-break: break-all;
				text-align: left;
				max-width: 60%;
				margin-bottom: 10px;
				padding: 10px 18px 10px;
			}
			
			.right .message_content {
				background: #98E165;
			}
			
			.left .message_content {
				background: #F6F6F6;
			}
			
			.ht-footer {
				background-color: #F2F6FC;
				color: #909399;
				text-align: center;
				height: auto !important;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<el-container class="cc-container">
				<el-header>
					<el-row type="flex" align="middle">
						<el-col v-if="isLogin">
							欢迎，{{user.nickname}}！
						</el-col>
						<el-col align="right" v-if="isLogin">
							<el-button type="primary" @click="dialogChangePasswordVisible = true">修改密码</el-button>
							<el-button type="primary" @click="location.href = '/hou-tai/friend.html'">个人中心</el-button>
							<el-button type="primary" @click="location.href = CONST_STATIC_URL + '/hou-tai/user.html'" v-if="hasAuthority('admin')">后台管理</el-button>
							<el-button type="primary" @click="logout">退出</el-button>
						</el-col>
						<el-col align="right" v-else>
							<el-button type="primary" @click="dialogRegVisible = true">注册</el-button>
							<el-button type="primary" @click="dialogLoginVisible = true">登录</el-button>
						</el-col>
					</el-row>
				</el-header>
				<el-main>
					<template v-if="isLogin">
						<el-container class="main_inner">
							<el-aside class="chat_list">
								<div class="chat_item" v-for="friend in friends" @click="selectFriend(friend, 1)">
									<el-row type="flex" align="middle">
										<el-col>
											{{friend.name}}
											<el-badge :value="friend.newMessageNumber" :max="9" class="mark" />
										</el-col>
									</el-row>
								</div>
								<div class="chat_item" v-for="group in groups" @click="selectFriend(group, 2)">
									<el-row type="flex" align="middle">
										<el-col>
											{{group.name}}
											<el-badge :value="group.newMessageNumber" :max="9" class="mark" />
										</el-col>
									</el-row>
								</div>
							</el-aside>
							<el-container class="box">
								<el-header class="box_hd">
									{{currentUser.name}}
								</el-header>
								<el-main class="box_bd" id="messages">
									<el-row v-for="message in messages" :class="message.senderId == user.id ? 'right' : 'left'" type="flex" align="middle">
										<el-col :align="message.senderId == user.id ? 'right' : 'left'">
											<div class="message_sender">
												{{message.senderNickname}} [{{message.time | date('yyyy-MM-dd hh:mm:ss')}}]
											</div>
											<div class="message_content">
												{{message.content}}
											</div>
										</el-col>
									</el-row>
								</el-main>
								<el-footer class="box_ft">
									<el-container>
										<el-main class="content">
											<el-input type="textarea" :rows="6" placeholder="请输入内容" maxlength="1000" resize="none" v-model="editArea" @keyup.ctrl.enter.native="sendMessage"></el-input>
										</el-main>
										<el-footer class="action">
											<el-row type="flex">
												<el-col align="right">
													<el-tooltip effect="light" content="按Ctrl+Enter发送" placement="left">
														<el-button :type="editArea == '' ? 'info' : 'success'" size="small" @click="sendMessage">发送</el-button>
													</el-tooltip>
												</el-col>
											</el-row>
										</el-footer>
									</el-container>
								</el-footer>
							</el-container>
						</el-container>
					</template>
				</el-main>
				<el-footer class="ht-footer">
					<a href="http://www.miitbeian.gov.cn/" target="_blank">鄂ICP备00000000号</a>
				</el-footer>
			</el-container>
			<el-dialog title="注册" :visible.sync="dialogRegVisible" width="400px">
				<el-form :rules="regRules" :model="regUser" ref="regUser" label-width="80px" @keyup.enter.native="submitRegForm('regUser')">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="regUser.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="regUser.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPassword">
						<el-input type="password" v-model="regUser.checkPassword" placeholder="请再次输入密码"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="nickname">
						<el-input v-model="regUser.nickname" placeholder="请输入昵称"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model="regUser.mobile" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="regUser.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="resetForm('regUser')">重置</el-button>
						<el-button type="primary" @click="submitRegForm('regUser')">注册</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<el-dialog title="登录" :visible.sync="dialogLoginVisible" width="400px" @keyup.enter.native="submitLoginForm('loginUser')">
				<el-form :rules="loginRules" :model="loginUser" ref="loginUser" label-width="80px">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="loginUser.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="captcha">
						<el-input v-model="loginUser.captcha" placeholder="请输入验证码" maxlength="5"></el-input>
						<br />
						<img :src="captchaImg" @click="getCaptchaImg" />
					</el-form-item>
					<el-form-item>
						<el-button @click="resetForm('loginUser')">重置</el-button>
						<el-button type="primary" @click="submitLoginForm('loginUser')">登录</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<el-dialog title="修改密码" :visible.sync="dialogChangePasswordVisible" width="400px" @keyup.enter.native="submitChangePasswordForm('changePasswordUser')">
				<el-form :rules="changePasswordRules" :model="changePasswordUser" ref="changePasswordUser" label-width="80px">
					<el-form-item label="原密码" prop="oldPassword">
						<el-input type="password" v-model="changePasswordUser.oldPassword" placeholder="请输入原密码"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="password">
						<el-input type="password" v-model="changePasswordUser.password" placeholder="请输入新密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPassword">
						<el-input type="password" v-model="changePasswordUser.checkPassword" placeholder="请再次输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="resetForm('changePasswordUser')">重置</el-button>
						<el-button type="primary" @click="submitChangePasswordForm('changePasswordUser')">确定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					var _this = this;

					return {
						isLogin: false,
						dialogRegVisible: false,
						dialogLoginVisible: false,
						dialogChangePasswordVisible: false,
						user: {},
						friendUsername: '',
						friend: {},
						friends: [],
						groups: [],
						currentUser: {},
						messages: [],
						editArea: '',
						newMessageNumber: {},
						regUser: {
							username: '',
							password: '',
							checkPassword: '',
							nickname: '',
							mobile: '',
							email: ''
						},
						loginUser: {
							username: '',
							password: '',
							captcha: ''
						},
						changePasswordUser: {
							oldPassword: '',
							password: '',
							checkPassword: ''
						},
						captchaImg: '',

						// 表单校验规则开始
						regRules: {
							username: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								},
								{
									min: 2,
									max: 20,
									message: '长度在 2到 20个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isUsername(value)) {
											callback(new Error('用户名由中文数字字母或下划线组成'));
											return;
										}
										axios({
											method: 'get',
											url: CONST_URL + '/user/checkUser',
											params: {
												username: value
											}
										}).then(function(response) {
											if(response.data.code == '0000') {
												if(response.data.data) {
													callback(new Error('用户已存在'));
												} else {
													callback();
												}
											} else {
												console.log(response.data);
											}
										}).catch(function(error) {
											alert(error.response.status);
											console.log(error);
										});
									},
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 16,
									message: '长度在 6到 16个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isPassword(value)) {
											callback(new Error('密码由数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							checkPassword: [{
									required: true,
									message: '请再次输入密码',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(value !== _this.regUser.password) {
											callback(new Error('两次输入密码不一致!'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							nickname: [{
									required: true,
									message: '请输入昵称',
									trigger: 'blur'
								},
								{
									min: 2,
									max: 20,
									message: '长度在 2到 20个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isNickname(value)) {
											callback(new Error('昵称由中文数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							mobile: [{
								validator: function(rule, value, callback) {
									if(!isMobile(value) && value != null && value != '') {
										callback(new Error('请输入正确的手机号'));
									} else {
										callback();
									}
								},
								trigger: 'blur'
							}],
							email: [{
								validator: function(rule, value, callback) {
									if(!isEmail(value) && value != null && value != '') {
										callback(new Error('邮箱格式不正确'));
									} else {
										callback();
									}
								},
								trigger: 'blur'
							}]
						},
						loginRules: {
							username: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								},
								{
									min: 2,
									max: 20,
									message: '长度在 2到 20个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isUsername(value)) {
											callback(new Error('用户名由中文数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 16,
									message: '长度在 6到 16个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isPassword(value)) {
											callback(new Error('密码由数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							captcha: [{
									required: true,
									message: '请输入验证码',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isCaptcha(value)) {
											callback(new Error('验证码格式不正确'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							]
						},
						changePasswordRules: {
							oldPassword: [{
									required: true,
									message: '请输入原密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 16,
									message: '长度在 6到 16个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isPassword(value)) {
											callback(new Error('密码由数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入新密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 16,
									message: '长度在 6到 16个字符',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(!isPassword(value)) {
											callback(new Error('密码由数字字母或下划线组成'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							],
							checkPassword: [{
									required: true,
									message: '请再次输入密码',
									trigger: 'blur'
								},
								{
									validator: function(rule, value, callback) {
										if(value !== _this.changePasswordUser.password) {
											callback(new Error('两次输入密码不一致!'));
										} else {
											callback();
										}
									},
									trigger: 'blur'
								}
							]
						}
						// 表单校验规则结束
					};
				},

				methods: {
					/**
					 * 清除数据
					 */
					clean: function() {
						this.user = {};
						this.friendUsername = '';
						this.friend = {};
						this.friends = [];
						this.groups = [];
						this.currentUser = {};
						this.messages = [];
						this.editArea = '';
						this.regUser = {};
						this.loginUser = {};
						this.changePasswordUser = {};
						sessionStorage.clear();
					},
					/**
					 * 退出登录
					 */
					logout: function() {
						var _this = this;
						_this.clean();
						localStorage.removeItem('user');
						_this.isLogin = false;
						authAxios({
							method: 'post',
							url: CONST_URL + '/user/logout',
						}).then(function(response) {
							if(response.data.code == '0000') {
								authAxios.defaults.headers.common['Authorization'] = '';
								localStorage.removeItem('token');
								_this.$message.success('已安全退出！');
							} else {
								_this.$message.error(response.data.message);
								console.log(response.data);
							}
						}).catch(function(error) {
							alert(error.response.status);
							console.log(error);
						});
					},
					/**
					 * 好友列表
					 */
					friendList: function() {
						var _this = this;
						authAxios({
							method: 'get',
							url: CONST_URL + '/messageSend/friendList'
						}).then(function(response) {
							if(response.data.code == '0000') {
								_this.friends = response.data.data;
							} else {
								_this.$message.error(response.data.message);
								console.log(response.data);
							}
						}).catch(function(error) {
							alert(error.response.status);
							console.log(error);
						});
					},
					/**
					 * 群组列表
					 */
					groupList: function() {
						var _this = this;
						authAxios({
							method: 'get',
							url: CONST_URL + '/messageSend/groupList'
						}).then(function(response) {
							if(response.data.code == '0000') {
								_this.groups = response.data.data;
							} else {
								_this.$message.error(response.data.message);
								console.log(response.data);
							}
						}).catch(function(error) {
							alert(error.response.status);
							console.log(error);
						});
					},
					/**
					 * 选择好友(群组)
					 */
					selectFriend: function(friend, type) {
						var _this = this;
						this.currentUser = friend;
						this.currentUser.type = type;
						var url = '/messageSend/getFriendMessage';
						if(_this.currentUser.type == 2) {
							url = '/messageSend/getGroupMessage';
						}
						var size = this.currentUser.newMessageNumber;
						size = size > 10 ? size : 10;
						size = size < 30 ? size : 30;
						authAxios({
							method: 'get',
							url: CONST_URL + url,
							params: {
								id: _this.currentUser.id,
								start: 0,
								size: size
							}
						}).then(function(response) {
							if(response.data.code == '0000') {
								_this.messages = response.data.data.reverse();
								_this.currentUser.newMessageNumber = 0;
								_this.$nextTick(function() {
									var div = document.getElementById("messages");
									div.scrollTop = div.scrollHeight;
								});
							} else {
								_this.$message.error(response.data.message);
								console.log(response.data);
							}
						}).catch(function(error) {
							alert(error.response.status);
							console.log(error);
						});
					},
					/**
					 * 注册
					 */
					submitRegForm: function(formName) {
						var _this = this;
						if(_this.regUser.mobile == '') {
							_this.regUser.mobile = null;
						}
						if(_this.regUser.email == '') {
							_this.regUser.email = null;
						}
						this.$refs[formName].validate(function(valid) {
							if(!valid) {
								console.log('error submit!!');
								return false;
							}
							axios({
								method: 'post',
								url: CONST_URL + '/user/reg',
								data: _this.regUser
							}).then(function(response) {
								if(response.data.code == '0000') {
									_this.dialogRegVisible = false;
									_this.$message.success('注册成功！');
								} else {
									_this.$message.error('注册失败！');
									console.log(response.data);
								}
							}).catch(function(error) {
								alert(error.response.status);
								console.log(error);
							});
						});
					},
					/**
					 * 登录
					 */
					submitLoginForm: function(formName) {
						var _this = this;
						this.$refs[formName].validate(function(valid) {
							if(!valid) {
								console.log('error submit!!');
								return false;
							}
							login(_this.loginUser.username, _this.loginUser.password, _this.loginUser.captcha)
								.then(function() {
									_this.clean();
								}).then(getMe)
								.then(function(response) {
									_this.user = response;
									_this.isLogin = true;
									_this.dialogLoginVisible = false;
									_this.$message.success('登录成功！');
									_this.friendList();
									_this.groupList();
									_this.connectWebSocket();
								}).catch(function(error) {
									_this.getCaptchaImg();
									if(error.response.status == 400 && error.response.data.error == 'invalid_grant') {
										var errorDescription = error.response.data.error_description;
										if(errorDescription == 'Bad credentials') {
											_this.$message.error('用户名或密码错误！');
										} else {
											_this.$message.error(errorDescription);
										}
									} else {
										alert(error.response.status);
										console.log(error);
									}
								});
						});
					},
					/**
					 * 获取验证码图片
					 */
					getCaptchaImg: function() {
						this.captchaImg = CONST_URL + '/user/captcha?' + Date.now();
						this.loginUser.captcha = '';
					},
					/**
					 * 修改密码
					 */
					submitChangePasswordForm: function(formName) {
						var _this = this;
						this.$refs[formName].validate(function(valid) {
							if(!valid) {
								console.log('error submit!!');
								return false;
							}
							authAxios({
								method: 'post',
								url: CONST_URL + '/user/changePassword',
								params: _this.changePasswordUser
							}).then(function(response) {
								if(response.data.code == '0000') {
									_this.dialogChangePasswordVisible = false;
									_this.changePasswordUser = {};
									_this.$message.success('修改密码成功！');
								} else {
									_this.$message.error(response.data.message);
									console.log(response.data);
								}
							}).catch(function(error) {
								alert(error.response.status);
								console.log(error);
							});
						});
					},
					resetForm: function(formName) {
						this.$refs[formName].resetFields();
					},
					/**
					 * 通过好友的id得到聊天记录
					 */
					getMessages: function(id) {
						var messages = JSON.parse(sessionStorage.getItem('messages@' + id));
						if(messages == null) {
							messages = [];
						}
						return messages;
					},
					/**
					 * 连接WebSocket
					 */
					connectWebSocket: function() {
						var _this = this;
						var token = localStorage.getItem('token');
						if(token != null) {
							token = JSON.parse(token);
							token = token.access_token;
						}
						var ws = new WebSocket(CONST_WS_URL + "/" + token);

						ws.onopen = function() {
							console.log("连接打开");
						};

						ws.onmessage = function(msg) {
							var messageVO = JSON.parse(msg.data);
							var receiverType = messageVO.receiverType;
							if(receiverType == 1) {
								var senderId = messageVO.senderId;
								if(senderId == _this.currentUser.id) {
									_this.messages.push(messageVO);
									authAxios({
										method: 'post',
										url: CONST_URL + '/messageSend/readFriendMessage',
										params: {
											id: senderId,
											messageSendId: messageVO.id
										}
									}).then(function(response) {
										if(response.data.code != '0000') {
											_this.$message.error(response.data.message);
											console.log(response.data);
										}
									}).catch(function(error) {
										alert(error.response.status);
										console.log(error);
									});
									_this.$nextTick(function() {
										var div = document.getElementById("messages");
										div.scrollTop = div.scrollHeight;
									});
								} else {
									var f = _this.friends.find(function(v) {
										return v.id == senderId;
									});
									f.newMessageNumber++;
								}
							} else if(receiverType == 2) {
								var receiverId = messageVO.receiverId;
								if(receiverId == _this.currentUser.id) {
									_this.messages.push(messageVO);
									authAxios({
										method: 'post',
										url: CONST_URL + '/messageSend/readGroupMessage',
										params: {
											id: receiverId,
											messageSendId: messageVO.id
										}
									}).then(function(response) {
										if(response.data.code != '0000') {
											_this.$message.error(response.data.message);
											console.log(response.data);
										}
									}).catch(function(error) {
										alert(error.response.status);
										console.log(error);
									});
									_this.$nextTick(function() {
										var div = document.getElementById("messages");
										div.scrollTop = div.scrollHeight;
									});
								} else {
									var f = _this.groups.find(function(v) {
										return v.id == receiverId;
									});
									f.newMessageNumber++;
								}
							}
							console.log("消息: " + msg.data);
						};

						ws.onerror = function(msg) {
							console.log("错误消息: " + msg.data);
						}

						ws.onclose = function() {
							console.log("连接关闭");
						};
					},
					/**
					 * 发送消息
					 */
					sendMessage: function() {
						var _this = this;
						if(_this.currentUser.id == undefined) {
							_this.$message.warning('请选择聊天对象');
							return;
						}
						if(_this.editArea == '') {
							_this.$message.warning('发送消息不能为空');
							return;
						}
						var url = '/messageSend/sendFriend';
						if(_this.currentUser.type == 2) {
							url = '/messageSend/sendGroup';
						}
						axios({
							method: 'post',
							url: CONST_URL + url,
							params: {
								message: _this.editArea,
								id: _this.currentUser.id
							}
						}).then(function(response) {
							if(response.data.code == '0000') {
								if(_this.currentUser.type == 1) {
									var messageVO = {
										type: 1,
										senderId: _this.user.id,
										senderNickname: _this.user.nickname,
										receiverType: _this.currentUser.type,
										receiverId: _this.currentUser.id,
										content: _this.editArea,
										time: new Date()
									};
									_this.messages.push(messageVO);
								}
								_this.editArea = '';
								_this.$nextTick(function() {
									var div = document.getElementById("messages");
									div.scrollTop = div.scrollHeight;
								});
							} else {
								_this.$message.error(response.data.message);
								console.log(response.data);
							}
						});
					},
				},
				mounted: function() {
					this.$nextTick(function() {
						var _this = this;
						_this.getCaptchaImg();
						checkToken().then(function() {
							var token = localStorage.getItem('token');
							var user = localStorage.getItem('user');
							if(token != null) {
								token = JSON.parse(token);
								authAxios.defaults.headers.common['Authorization'] = token.token_type + ' ' + token.access_token;
							}
							if(user != null) {
								_this.user = JSON.parse(user);
								_this.isLogin = true;
								_this.friendList();
								_this.groupList();
								_this.connectWebSocket();
							}
						});
					});
				}
			});
		</script>
	</body>

</html>